前言

從 Hello World 開始寫程式近一年了，每天充滿各種學習和挑戰，樂此不疲，覺得幸運能夠在樂於分享、充滿新知的領域，透過不斷地學習和經驗積累，慢慢朝著自己的目標前進。

第一次參加鐵人賽這類型的賽事，是全新的體驗。30天連續不間斷的文章，對於技術、意志力及表達能力都是一番試煉，也期待30天後自己的成長!

選擇主題

這次的鐵人賽30天原本決定將過去 React 的學習整理寫成系列文章，但近期由於工作緣故，需要在很短的時間上手 TypeScript ，使用 React 加 TypeScript 進行開發。於是，在開賽前幾天臨時決定更換方向，將這次的鐵人賽活動作為每天 TypeScript 的學習紀錄，一則督促自己每天投入一定的心力學習，另一藉此系統性地整理所學並分享。

期待能順利完成挑戰!!!

正文

在學習 TypeScript 之前，首先，要先了解什麼是 TypeScript ?

什麼是 TypeScript ？

引用官網上 TypeScript 的定義：

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open source

TypeScript(而後簡稱為TS) 是一個基於 Javascript(而後簡稱為JS) 的超集合(superset)開源語言，可以編譯成純 JS ，且可以運行在任何瀏覽器、任何伺服器或任何系統上。

所謂的超集合(superset)是什麼呢？

JS 是一個語言的集合，而 TS 完全基於 JS 的語法，有點類似「擴充板的 JS 」，多了額外擴充如型別系統與註記（Annotation）等。

換句話說，可以把 TypeScript 想成是在原生JS上包裝一層新的語法，因此，如果在 TS 裡面執行原生 JS 的 ES6 或 ES5 語法也是可以的，只是 TS 會幫忙把原生 JS 裡潛藏的 Bug 或者是不清楚的邏輯拋出警告（Warning）。

TypeScript 的優點？

1. 提高程式碼可讀性和可維護性
   TS 加入靜態型別的語法，像是：類別（class）、建構子（constrator）、介面（interface）、繼承（inheritance）、模組（moudle）等，讓開發人員可以利用這些強型別語法撰寫更嚴謹、更少的程式碼，避免預期外的錯誤，也更容易讓其它工具來做程式碼分析。

2. 擁有活躍的開發社群
   主流框架如 React 、 Vue 和 Angular 以及大部分的第三方函式庫都支援 TS 協作，甚至 Google 開發的 Angular2 就是基於 TS 語言編寫，因此，要學 Angular ，一定要先學 TS。

為什麼需要使用 TypeScript ?

總體而言，TS 改善了過去 JS 弱型別語言的缺點，透過 TS 擴充的型別系統和編譯器檢查，讓開發者在開發過程做更多的約束，撰寫更嚴謹、更少錯誤和重複、更好管理的程式碼，從而大大減少實際運行程式碼時的錯誤。